<template>
  <ArmyPanelLayout class="barracksLeftTwo" title="钥匙柜领取记录" :rightPanel="true">
    <template v-slot:subtitle>
      <div class="barracksLeftTwo--subtitle">
        <BtnGroupsTab v-if="btnArr.length" :groups="btnArr" :active="btnActive" @change="tabChangeAction"></BtnGroupsTab>
      </div>
    </template>
    <BtnGroupDevideTab v-if="tabList.length" style="margin: 16px 0 16px 21px;" :tabList="tabList" :tabActive="tabActive" @change="typeChangeAction">
    </BtnGroupDevideTab>
    <div class="barracksLeftTwo--table" v-if="tableData.length">
      <!--
        目标：设置 el-scrollbar 滚动，但是不允许用户滚动鼠标
        1. wrap-style="overflow:hidden" 不允许鼠标滚动
        2. view-style="height: 109px;overflow: hidden;" 不允许出现滚动条
        3. :always="false" 默认不显示滚动条
        -->
      <!--<el-scrollbar wrap-style="overflow:hidden" view-style="height: 170px;overflow: hidden;" :always="false">-->
      <el-scrollbar view-style="height: 170px;" :always="false">
        <div class="tablelist">
            <div class="row" :class="{'two': (index % 2 !== 0)}" v-for="(item, index) in tableData" :key="index" :title="getTips(item)">
              <!--<div class="row" :class="{'two': (index % 2 !== 0)}" v-for="index in 20" :key="index">-->
              <span class="icon"></span>
              <span class="name">{{item.user}}</span>在
              <span class="date">
                {{item.useTime}}
              </span>
              <span class="action" :class="{back: item.useStatus === '归还'}">{{item.useStatus}}</span>了
              <span class="addr">{{item.lockerName}}</span>的钥匙
            </div>
        </div>
      </el-scrollbar>
    </div>
    <div v-else class="empty" style="margin-top: 25%;">
      <DataEmptyTwo></DataEmptyTwo>
    </div>
  </ArmyPanelLayout>
</template>

<script>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import BtnGroupDevideTab from '@/views/armyScreen/comp/BtnGroupDevideTab.vue'
import BtnGroupsTab from '@/views/armyScreen/comp/BtnGroupsTab.vue'
import {random14} from '@/util/utils.js'
import {ElScrollbar} from 'element-plus'
import {keyUseRecordListService} from '@/api/armyScreenApiV2.js'
import useCommonMethods from '@/mixin/useCommonMethods.js'
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import $bus from "@/util/bus";

export default {
  inject: ['screenContext'],
  components: {
    DataEmptyTwo,
    ArmyPanelLayout,
    BtnGroupDevideTab,
    BtnGroupsTab
  },
  data() {
    return {
      sid: 'chart_' + random14(),
      tabList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '1号柜',
          value: 'E'
        },
        {
          label: '2号柜',
          value: 'GB'
        },
      ],
      tabActive: '',
      btnArr: [],
      btnActive: '',
      tableData: []
    }
  },
  setup() {
    const {dictByTypeService} = useCommonMethods()
    return {
      dictByTypeService
    }
  },
  async mounted() {
    // * 钥匙柜列表-lockerList
    // * 钥匙借取记录时间范围-keyUseTimeScope
    // * 人员进出库-人员识别类型-personType
    // * 人员进出库-方向类型 directionType
    const keyUseTimeScopeRes = await this.dictByTypeService('keyUseTimeScope')
    const keyUseTimeScopeArr = keyUseTimeScopeRes.data?.list || []
    keyUseTimeScopeArr.forEach(item => {
      item.value = item.dictCode
      item.name = item.dictValue
    })
    this.btnArr = keyUseTimeScopeArr

    const lockerListRes = await this.dictByTypeService('lockerList')
    const lockerListArr = lockerListRes.data?.list || []
    lockerListArr.forEach(item => {
      item.value = item.dictCode
      item.label = item.dictValue
    })
    this.tabList = lockerListArr

    if (keyUseTimeScopeArr[0] && lockerListArr[0]) { // 需要从数据字典获取数据，如果没有类型，将无法展示
      this.btnActive = this.btnArr[0].dictCode
      this.tabActive = this.tabList[0].dictCode

      this.getKeyUseRecordList()
    }
    $bus.on('reRequest', this.getKeyUseRecordList)
  },
  beforeUnmount() {
    $bus.off('reRequest', this.getKeyUseRecordList)
  },
  methods: {
    // 获取颜色的样式
    getColorStr (str) {
      if (str === '已归还') {
        return 'color: #00E279;'
      } else if (str === '已借出') {
        return 'color: #EE4A45;'
      }
      return ''
    },
    formatDateStr (dateStr) {
      if (dateStr) {
        return dateStr.substring(0,10)
      } else {
        return '--'
      }
    },
    getTips (info) {
      return `${info.user}在${info.useTime}${info.useStatus}了${info.lockerName}的钥匙`
    },
    tabChangeAction(value) {
      this.btnActive = value
      this.getKeyUseRecordList()
    },
    typeChangeAction(value) {
      this.tabActive = value
      this.getKeyUseRecordList()
    },
    getKeyUseRecordList() {
      const paramObj = {
        "lockerIndexCode": this.tabActive,
        "pageNo": 1,
        "pageSize": 20,
        "timeScope": this.btnActive // 1-最近七天，2-最近一月，3-最近三月；默认七天,示例值(1)
      }
      keyUseRecordListService(paramObj).then(res => {
        this.tableData = res?.data?.list || []
      })
    },
    changeTab(tab) {
      this.tabActive = tab
      this.cameraOnOfflineBySchool()
    },
  }
}
</script>

<style lang="scss" scoped>
.barracksLeftTwo {
  width: 439px;
  height: 100%;

  &--subtitle {
    width: 200px;
    line-height: 24px;
  }

  &-tabList {
    margin: 16px 0 24px 21px;
    display: flex;
    justify-content: flex-start;

    &_item {
      cursor: pointer;
      height: 24px;
      padding: 0 10px;
      line-height: 24px;
      background-image: linear-gradient(270deg, rgba(0, 97, 165, 0.58) 0%, #0059A4 100%);
      border-radius: 2px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(167, 222, 255, 0.5);
      font-weight: 400;
      margin-right: 12px;
    }

    .selected {
      background-image: linear-gradient(270deg, rgba(17, 85, 152, 0.58) 0%, #00A3FA 100%);
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #C9EBFF;
      font-weight: 600;
    }
  }

  &--table {
    width: 420px;
    margin: 0 auto;
    padding-bottom: 10px;
    .tablelist{
      width: 100%;
      //animation: move 17s linear infinite normal;
      overflow-x: hidden;
      &:hover{
        animation-play-state:paused;
      }
    }
    .row {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(216, 240, 255, 0.80);
      letter-spacing: 0;
      font-weight: 400;
      height: 28px;
      line-height: 28px;
      padding-left: 8px;
      white-space: nowrap;
      &.two {
        background-image: url('@/assets/images/armyScreen/通行记录_底纹@2x.png');
        background-size: cover;
      }

      .icon{
        display: inline-block;
        position: relative;
        background: #DCF0FF;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .name{
        color: rgba(226,195,0,0.80);
      }
      .date{
        color: #72F0E3;
      }
      .action{
        color: rgba(236,78,33,0.80);
        &.back{
          color: rgba(20,220,83,0.80);
        }
      }
      .addr{
        color: rgba(50,197,255,0.80);
      }
    }
  }
  @keyframes move {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(calc(-100% + 235px));
    }
  }
}
</style>
